<template>
	<el-form
		ref="form"
		class="plr-1"
		label-position="top"
		label-width="40px"
		:model="form"
		:disabled="saving"
	>
		<el-upload
			drag
			list-type="picture"
			:headers="{ token }"
			:before-upload="beforeUpload"
			:file-list.sync="form.images"
			:data="fileData"
			:on-progress="uploadProgress"
			:on-error="uploadError"
			:on-success="uploadSuccess"
			:action="`${baseUrl}/index/uposs`"
			accept="image/*"
			:show-file-list="false"
		>
			<i class="el-icon-upload" />
			<div class="el-upload__text">将图片拖到此处，或<em>点击上传</em></div>
		</el-upload>
		<ul class="images">
			<li class="images-item" v-if="form.imageUrl">
				<span class="el-icon-close remove" @click="handleRemove(index)" />
				<div class="images-item__show">
					<el-image class="img" :src="form.imageUrl" fit="contain" />
				</div>
			</li>
		</ul>
		<!-- <el-form-item label="职位昵称" inline-message class="mt-1 zw" prop="jobTitle">
			<el-row>
				<el-col :span="22">
					<el-input
						:style="{ color: form.jobTitleColor }"
						v-model="form.jobTitle"
						placeholder="部肌肤管理总监"
						clearable
					/>
				</el-col>
				<el-col :span="2">
					<el-color-picker v-model="form.jobTitleColor"></el-color-picker>
				</el-col>
			</el-row>
		</el-form-item>
		<el-form-item label="名字" inline-message class="mt-1 mz" prop="name">
			<el-row>
				<el-col :span="22">
					<el-input v-model="form.name" placeholder="张三" clearable />
				</el-col>
				<el-col :span="2">
					<el-color-picker v-model="form.nameColor"></el-color-picker>
				</el-col>
			</el-row>
		</el-form-item>
		<el-form-item label="公司名称" inline-message class="mt-1 gs" prop="companyName">
			<el-row>
				<el-col :span="22">
					<el-input v-model="form.companyName" placeholder="xxxx公司" clearable />
				</el-col>
				<el-col :span="2">
					<el-color-picker v-model="form.companyNameColor"></el-color-picker>
				</el-col>
			</el-row>
		</el-form-item> -->
	</el-form>
</template>
<script>
import { baseUrl } from "@/config/env";
import dayjs from "dayjs";
import { mapGetters } from "vuex";

export default {
	props: {
		saving: Boolean,
		view: {
			type: Object,
			default: () => ({})
		}
	},
	data() {
		return {
			baseUrl,
			form: this.view.options,
			fileData: {},
			rules: {
				link: [{ type: "url", message: "链接格式不正确" }]
			}
		};
	},
	computed: {
		...mapGetters(["token"])
	},
	methods: {
		handleRemove(index) {
			this.form.imageUrl = "";
		},
		percentageFormat(percentage) {
			return this.toFixed(percentage) + "%";
		},
		// 上传文件
		beforeUpload(file) {
			this.fileData.name = file.name;
			this.fileData.dirname = "upload/" + dayjs().format("YYYY-MM-DD");
			this.fileData.type = 'ad_template'
		},
		// // 文件上传时
		uploadProgress(event, file, fileList) {
			// 	console.log(fileList, "fileList");
			// 	console.log(file, "file");
			// 	// this.form.imageUrl = file.data;
		},
		// 上传成功
		uploadSuccess(res, file, fileList) {
			console.log(file.response, "file");
			this.form.imageUrl = file.response.data;
		},
		// 上传失败
		uploadError(err) {
			const error = JSON.parse(err.message);
			this.$message.error(error.msg);
		}
	}
};
</script>
<style lang="scss" scoped>
::v-deep {
	.zw {
		.el-input__inner {
			color: v-bind("form.jobTitleColor") !important;
		}
	}
	.mz {
		.el-input__inner {
			color: v-bind("form.nameColor") !important;
		}
	}
	.gs {
		.el-input__inner {
			color: v-bind("form.companyNameColor") !important;
		}
	}

	.el-upload,
	.el-upload-dragger {
		width: 100%;
	}
	.el-upload-dragger {
		height: 120px;
		.el-icon-upload {
			margin-top: 15px;
		}
	}
}
.images {
	padding: 0;
	&-item {
		border: solid 1px #e0e0e0;
		border-radius: 3px;
		padding: 10px 8px 14px;
		margin: 10px 0;
		position: relative;
		.remove {
			position: absolute;
			right: 10px;
			top: 10px;
			color: grey;
			cursor: pointer;
		}
		&__show {
			display: flex;
			align-items: center;
			.img {
				width: 100px;
				height: 80px;
				border: solid 1px #e0e0e0;
				border-radius: 3px;
			}
			&--right {
				flex: 1;
				overflow: hidden;
				padding-left: 10px;
			}
		}
		::v-deep .el-form-item {
			margin-bottom: 0;
		}
	}
}
</style>
